<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/产品管理-新增产品.css">
<body>
<header>
    <nav>
        <div class="logo">
            <span>客户资源信息</span>管理后台
        </div>
        <ul class="management">
            <li><span>&#xe661;</span>权限管理</li>
            <li><span>&#xe659;</span>用户列表</li>
            <li><span>&#xe68d;</span>系统日志</li>
        </ul>
        <ul class="management">
            <li><span class="ponum">&#xe65f;</span>在线人数</li>
            <li class="msgbtn">
                <span class="message">&#xe650;</span>系统消息
                <div class="newmsg" id="newmsg">
                    <div><span>最新消息</span><span class="down">&#xe600;</span></div>
                    <ul>
                        <li>【版本更新】书链管理后台1.3版<span>09-12</span></li>
                        <li>【版本更新】书链管理后台1.3版<span>09-11</span></li>
                        <li>【版本更新】书链管理后台1.3版<span>09-10</span></li>
                        <li>【版本更新】书链管理后台1.3版<span>09-09</span></li>
                        <li>【版本更新】书链管理后台1.3版<span>09-08</span></li>
                    </ul>
                </div>
            </li>
            <li><span>&#xe620;</span>用户<span>&#xe65c;</span></li>
        </ul>
    </nav>
</header>
<div class="bigbox">
    <div class="sidebar">
        <ul>
            <li class="home"><span>&#xe60c;</span><a href="javascript:;">首页</a></li>
            <li><span>&#xe659;</span><a href="javascript:;">机构管理</a></li>
            <li class="li-list"><span>&#xe775;</span><a href="javascript:;">信息管理</a></li>
            <li class="li-list"><span>&#xe775;</span><a href="javascript:;">商机管理</a></li>
            <li class="li-list"><span>&#xe775;</span><a href="javascript:;">产品管理</a></li>
            <li class="li-list"><span>&#xe775;</span><a href="javascript:;">合同管理</a></li>
            <li class="li-list"><span>&#xe775;</span><a href="javascript:;">日志管理</a></li>
            <li class="li-list"><span>&#xe775;</span><a href="javascript:;">预约管理</a></li>
            <li class="li-list"><span>&#xe775;</span><a href="javascript:;">售后管理</a></li>
            <li class="li-list"><span>&#xe775;</span><a href="javascript:;">任务清单</a></li>
            <li><span>&#xe620;</span><a href="javascript:;">员工管理</a></li>
            <li><span>&#xe64b;</span><a href="javascript:;">资料库管理</a></li>
            <li><span>&#xe60d;</span><a href="javascript:;">系统对接管理</a></li>
            <li><span>&#xe60a;</span><a href="javascript:;">统计分析</a></li>
            <li><span>&#xe659;</span><a href="javascript:;">用户管理</a></li>
            <li><span>&#xe65e;</span><a href="javascript:;">系统配置</a></li>
            <li><span>&#xe611;</span><a href="javascript:;">系统日志</a></li>
            <li><span>&#xe647;</span><a href="javascript:;">安全退出</a></li>
        </ul>
    </div>
    <div class="box-right">
        <div class="rig-con">
            <h2>创建产品信息</h2>
            <form action="">
                <table>
                    <caption>
                        <p class="p1">
                            <span class="sp1">基本信息</span>
                            <span class="sp2">注: 带有"*"必填项</span>
                        </p>
                    </caption>
                    <tr>
                        <td>产品名称:</td>
                        <td>
                            <input type="text" class="inp1">
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>机构名称:</td>
                        <td>
                            <input type="text" class="inp2">
                            <button class="btn1">查询</button>
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>产品类别:</td>
                        <td>
                            <input type="checkbox" checked>全部
                            <input type="checkbox">网站专区
                            <input type="checkbox">手机APP
                            <input type="checkbox">微刊
                            <input type="checkbox">触摸屏
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>产品状态:</td>
                        <td>
                            <select name="is_open" class="inp1">
                                <option value="">未开通</option>
                                <option value="">开通</option>
                            </select>
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>使用状态:</td>
                        <td>
                            <select name="state" class="inp1">
                                <option value="未使用">未使用</option>
                                <option value="使用">使用</option>
                                <option value="正式使用">正式使用</option>
                            </select>
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>经办人:</td>
                        <td>
                            <input type="text" class="inp1">
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>联系人:</td>
                        <td>
                            <input type="text" class="inp1">
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>合同编码:</td>
                        <td>
                            <input type="text" class="inp1">
                            <span class="sp3">合同ID</span>
                            <span class="spx">*</span>
                        </td>
                    </tr>
                </table>
                <table>
                    <caption>
                        <p class="p1">
                            <span class="sp1">专区产品相关信息</span>
                        </p>
                    </caption>
                    <tr>
                        <td>选专区资源类型:</td>
                        <td>
                            <input type="checkbox" name="" class="inpc">期刊
                            <input type="checkbox" name="" class="inpc">报纸
                            <input type="checkbox" name="" class="inpc">图书
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>专区服务式:</td>
                        <td>
                            <input type="checkbox" name="" class="inpc">定制开发专区
                            <input type="checkbox" name="" class="inpc">博看专区
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>专区开通账号数量:</td>
                        <td>
                            <input type="text" name="" class="inp3">
                            <span>个</span>
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>开通日期:</td>
                        <td>
                            <input type="date" name="" class="inp1">
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>IP段:</td>
                        <td>
                            <input type="text" name=""  class="inp2">
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>并发数:</td>
                        <td>
                            <input type="text" name="" class="inp1">
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>用户名和密码:</td>
                        <td>
                            <input type="file" name="">
                            <span class="spx">*</span>
                            <span class="spa3">导入前台用户账号</span>
                        </td>
                    </tr>
                    <tr>
                        <td>专区地址:</td>
                        <td>
                            <input type="text" name="" placeholder="http://" class="inp2">
                            <button class="btn2"></button>
                            <span class="sp4">点加号按钮进行增加</span>
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>后台链接:</td>
                        <td>
                            <input type="text" name="" placeholder="http://" class="inp2">
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>用户名和密码:</td>
                        <td>
                            <input type="file" name="">
                            <span class="spa3">导入后台的用户账号</span>
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>通知状态:</td>
                        <td>
                            <select name="" class="inp1">
                                <option value="未审查">未审查</option>
                                <option value="审查通过">审查通过</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>通知时间:</td>
                        <td>
                            <input type="date" name="" class="inp1">
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>通知地址:</td>
                        <td>
                            <input type="text" name="" placeholder="http://" class="inp2">
                        </td>
                    </tr>
                    <tr>
                        <td>截图:</td>
                        <td>
                            <label for="inp2">
                                <button>选择文件</button>
                            </label>
                            <input type="file" name="" id="inp2" style="display: none">
                            <img class="img0" src="" alt="" style="display: none">
                            <img class="img1" src="" alt="">
                            <span class="spa3">850*500宽高, 图片格式: JPG或PNG, 文件大小规定2M</span>
                        </td>
                    </tr>
                    <tr>
                        <td>产品保质期:</td>
                        <td>
                            <input type="text" class="inp1">
                            <span>年</span>
                        </td>
                    </tr>
                    <tr>
                        <td>备注:</td>
                        <td><textarea name="" cols="50" rows="10"></textarea></td>
                    </tr>
                </table>
                <table>
                    <caption>
                        <p class="p1">
                            <span class="sp1">APP产品相关信息</span>
                        </p>
                    </caption>
                    <tr>
                        <td>APP资源类型:</td>
                        <td>
                            <input type="checkbox" name="" class="inpc">期刊
                            <input type="checkbox" name="" class="inpc">报纸
                            <input type="checkbox" name="" class="inpc">图书
                        </td>
                    </tr>
                    <tr>
                        <td>APP服务方式: </td>
                        <td>
                            <input type="checkbox" name="" class="inpc">定制开发APP
                            <input type="checkbox" name="" class="inpc">博看APP
                        </td>
                    </tr>
                    <tr>
                        <td>APP开通账号数量:</td>
                        <td>
                            <input type="text" name="" class="inp3">
                            <span>个</span>
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>备注:</td>
                        <td><textarea name=""cols="50" rows="10"></textarea></td>
                    </tr>
                </table>
                <table>
                    <caption>
                        <p class="p1">
                            <span class="sp1">微刊产品相关信息</span>
                        </p>
                    </caption>
                    <tr>
                        <td>选资源类型: </td>
                        <td>
                            <input type="checkbox" name="" class="inpc">期刊
                            <input type="checkbox" name="" class="inpc">报纸
                            <input type="checkbox" name="" class="inpc">图书
                        </td>
                    </tr>
                    <tr>
                        <td>微刊服务方式: </td>
                        <td>
                            <input type="checkbox" name="" class="inpc">微信API接口对接
                            <input type="checkbox" name="" class="inpc">微信公众号授权
                        </td>
                    </tr>
                    <tr>
                        <td>微刊运营方式: </td>
                        <td>
                            <input type="checkbox" name="" class="inpc">博看代运营
                            <input type="checkbox" name="" class="inpc">客户自运营
                        </td>
                    </tr>
                    <tr>
                        <td>微刊账号:</td>
                        <td>
                            <input type="date" name="" class="inp1">
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>微刊密码:</td>
                        <td>
                            <input type="date" name="" class="inp1">
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>APP开通账号数量:</td>
                        <td>
                            <input type="text" name="" class="inp3">
                            <span>个</span>
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>微刊地址:</td>
                        <td>
                            <input type="text" name="" placeholder="http://" class="inp2">
                        </td>
                    </tr>
                    <tr>
                        <td>备注:</td>
                        <td><textarea name="" id="" cols="50" rows="10"></textarea></td>
                    </tr>
                </table>
                <table>
                    <caption>
                        <p class="p1">
                            <span class="sp1">触摸屏产品相关信息</span>
                        </p>
                    </caption>
                    <tr>
                        <td>选博看资源类型:</td>
                        <td>
                            <input type="checkbox" name="" class="inpc">期刊
                            <input type="checkbox" name="" class="inpc">报纸
                            <input type="checkbox" name="" class="inpc">图书
                        </td>
                    </tr>
                    <tr>
                        <td>选资源范围: </td>
                        <td>
                            <input type="checkbox" name="" class="inpc">全库
                            <input type="checkbox" name="" class="inpc">选库
                            <input type="text"><span>个</span>
                            <input type="checkbox" name="" class="inpc">选刊
                            <input type="text"><span>个</span>
                        </td>
                    </tr>
                    <tr>
                        <td>触摸屏数量:</td>
                        <td>
                            <input type="text" name="" class="inp3">
                            <span>台</span>
                            <span class="spx">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td>朋友方式: </td>
                        <td>
                            <input type="checkbox">镜像
                            <input type="checkbox">远程
                            <input type="checkbox">馆外用户名
                        </td>
                    </tr>
                    <tr>
                        <td>备注:</td>
                        <td><textarea name=""cols="50" rows="10"></textarea></td>
                    </tr>
                </table>
                <p class="p2">
                    <input class="btn" type="submit" value="确定">
                    <button class="btn btns">取消</button>
                </p>
            </form>

        </div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script>
    let msgbtn = document.querySelector('.msgbtn')
    let down = document.querySelector('.down')
    let newmsg = document.querySelector('.newmsg')

    down.onclick = function(e) {
        newmsg.style.display = 'none'
        e.stopPropagation()
    }
    msgbtn.onclick = function() {
        newmsg.style.display = 'block'
    }
    let img1 = document.querySelectorAll('.img1');
    let img0 = document.getElementsByClassName('img0')[0];
    for(let i=0;i<img1.length;i++){
        img1[i].onclick = function () {
            img0.style.display='block';
            img0.src = this.src
        }
    }
    img0.onclick = function () {
        img0.style.display='none'
    }
</script>
</body>
</html>
